<template>
  <view v-if="showTabBar" class="tab-bar" :style="tabBarStyle">
    <view 
      v-for="(item, index) in tabbarList" 
      :key="index" 
      class="tab-bar-item" 
      @click="switchTab(item, index)"
    >
      <!-- 优先使用 FontIcon（用户端） -->
      <FontIcon 
        v-if="item.iconName" 
        :name="item.iconName" 
        :size="iconSize / 2"
        :color="selected === index ? selectedColor : color"
        class="tab-bar-icon-font"
      />
      <!-- 其次使用图片图标 -->
      <image 
        v-else-if="item.iconPath" 
        :src="selected === index ? item.selectedIconPath : item.iconPath" 
        class="tab-bar-icon"
        :style="iconStyle"
        mode="aspectFit"
      />
      <!-- 兜底使用 u-icon -->
      <u-icon 
        v-else 
        :name="getTabIcon(index)" 
        :color="selected === index ? selectedColor : color" 
        size="27"
      />
      <text class="tab-bar-text" :class="selected === index ? 'selected' : ''" :style="textStyle">{{ item.text }}</text>
      <!-- 角标 -->
      <view v-if="badges[index]" class="tab-bar-badge">{{ badges[index] }}</view>
      <!-- 红点 -->
      <view v-if="redDots[index]" class="tab-bar-red-dot"></view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store';
import { ROLE_TYPE } from '@/config/app';
import { merchantTabBar, userTabBar } from '@/config/tabBarConfig';
import FontIcon from '@/components/FontIcon.vue';

// 定义图标映射
const iconMap = {
  0: 'home',
  1: 'category',
  2: 'message',
  3: 'user'
};

export default {
  name: 'CustomTabBar',
  components: {
    FontIcon
  },
  props: {
    // 是否显示 tabbar
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      GM_STATUS_BAR_HEIGHT: uni.getStorageSync('GM_STATUS_BAR_HEIGHT') || 0,
      selected: 0,
      color: '#7A7E83',
      selectedColor: '#F37B1D',
      tabbarList: [],
      showTabBar: true,
      userStore: null,
      tabBarHeight: 100, // rpx，微信官方标准：50px = 100rpx
      safeAreaBottom: 0, // rpx
      systemInfo: {}, // 系统信息
      iconSize: 86, // rpx，与 GlobalTabBar 保持一致
      fontSize: 26, // rpx，与 GlobalTabBar 保持一致（13px = 26rpx）
      iconTextSpacing: 6, // rpx，微信官方标准：3px = 6rpx
      badges: {}, // 角标对象 { index: '99+' }
      redDots: {} // 红点对象 { index: true }
    };
  },
  computed: {
    tabBarStyle() {
      // 计算总高度（包括安全区域和 padding）
      // padding-top: 8rpx + padding-bottom: 20rpx = 28rpx
      const paddingHeight = 28; // rpx
      const totalHeight = this.tabBarHeight + this.safeAreaBottom + paddingHeight;
      return {
        height: totalHeight + 'rpx',
        paddingBottom: this.safeAreaBottom + 'rpx'
      };
    },
    iconStyle() {
      return {
        width: '27px',
        height: '27px'
      };
    },
    textStyle() {
      return {
        fontSize: this.fontSize + 'rpx',
        marginTop: this.iconTextSpacing + 'rpx'
      };
    }
  },
  created() {
    this.userStore = useUserStore();
  },
  mounted() {
    console.log('CustomTabBar - mounted');
    
    // 初始化系统信息
    this.initSystemInfo();
    
    // 隐藏原生 tabbar
    try {
      uni.hideTabBar({
        animation: false
      });
    } catch (e) {
      console.warn('隐藏原生 tabbar 失败:', e);
    }
    
    // 计算tabbar高度（与AdaptiveNavBar保持一致）
    this.calculateTabBarHeight();
    
    // 获取安全区域底部高度
    this.getSafeAreaBottom();
    
    // 获取用户角色和数据
    this.loadTabbarData();

    // 监听页面显示事件
    this.pageShowHandler = () => {
      this.updateSelectedTab();
      // 每次页面显示时都确保隐藏原生 tabbar
      try {
        uni.hideTabBar({ animation: false });
      } catch (e) {
        // 忽略错误
      }
    };
    uni.$on('pageShow', this.pageShowHandler);
    
    // 监听 tabBar 更新事件（当用户角色变化时）
    this.tabbarUpdateHandler = () => {
      console.log('CustomTabBar - 收到 tabbarUpdate 事件，重新加载 tabBar');
      this.loadTabbarData();
    };
    uni.$on('tabbarUpdate', this.tabbarUpdateHandler);

    // 监听路由变化
    this.onRouteChange();

    // 预加载 tabbar 页面
    this.$nextTick(() => {
      this.preloadTabbarPages();
    });
  },
  watch: {
    show(newVal) {
      this.showTabBar = newVal;
    }
  },
  beforeUnmount() {
    // 清理监听器
    if (this.pageShowHandler) {
      uni.$off('pageShow', this.pageShowHandler);
    }
    if (this.tabbarUpdateHandler) {
      uni.$off('tabbarUpdate', this.tabbarUpdateHandler);
    }
    if (this.checkPageTimer) {
      clearInterval(this.checkPageTimer);
    }
  },
  methods: {
    // 初始化系统信息
    initSystemInfo() {
      try {
        this.systemInfo = uni.getSystemInfoSync();
      } catch (e) {
        console.warn('获取系统信息失败:', e);
        this.systemInfo = {};
      }
    },
    
    // 计算tabbar高度（使用微信官方标准）
    calculateTabBarHeight() {
      try {
        // 微信官方标准：tabbar 内容高度为 50px = 100rpx（不包括安全区域和 padding）
        // 注意：实际显示高度会在 tabBarStyle 中加上 padding（8rpx + 20rpx = 28rpx）
        this.tabBarHeight = 100;
        console.log('CustomTabBar - 使用微信官方标准高度:', this.tabBarHeight + 'rpx');
        
        // 计算图标和文字大小
        this.calculateIconAndTextSize();
      } catch (e) {
        console.warn('计算tabbar高度失败:', e);
        // 默认使用微信官方标准高度
        this.tabBarHeight = 100;
        this.calculateIconAndTextSize();
      }
    },
    
    // 计算图标和文字大小（使用微信官方标准）
    calculateIconAndTextSize() {
      try {
        // 与 GlobalTabBar 保持一致：
        // 图标显示尺寸：86rpx
        // 文字大小：26rpx（13px）
        // 图标和文字间距：3px = 6rpx
        this.iconSize = 86;
        this.fontSize = 26;
        this.iconTextSpacing = 6;
        
        console.log('CustomTabBar - 使用微信官方标准尺寸:', {
          iconSize: this.iconSize + 'rpx',
          fontSize: this.fontSize + 'rpx',
          spacing: this.iconTextSpacing + 'rpx'
        });
      } catch (e) {
        console.warn('计算图标和文字大小失败:', e);
        // 默认使用与 GlobalTabBar 一致的值
        this.iconSize = 86;
        this.fontSize = 26;
        this.iconTextSpacing = 6;
      }
    },
    
    // 获取安全区域底部高度（适配多种机型）
    getSafeAreaBottom() {
      try {
        // 方法1：从 systemInfo.safeAreaInsets 获取（推荐）
        if (this.systemInfo.safeAreaInsets && this.systemInfo.safeAreaInsets.bottom) {
          // 将 px 转换为 rpx
          const pixelRatio = 750 / (this.systemInfo.windowWidth || 375);
          this.safeAreaBottom = this.systemInfo.safeAreaInsets.bottom * pixelRatio;
          console.log('CustomTabBar - 从 safeAreaInsets 获取安全区域:', this.safeAreaBottom + 'rpx');
          return;
        }
        
        // 方法2：从 systemInfo.safeArea 计算（兼容旧版本）
        if (this.systemInfo.safeArea) {
          const safeArea = this.systemInfo.safeArea;
          const screenHeight = this.systemInfo.screenHeight || this.systemInfo.windowHeight;
          if (screenHeight && safeArea.bottom) {
            const pixelRatio = 750 / (this.systemInfo.windowWidth || 375);
            const safeAreaBottomPx = screenHeight - safeArea.bottom;
            this.safeAreaBottom = safeAreaBottomPx * pixelRatio;
            console.log('CustomTabBar - 从 safeArea 计算安全区域:', this.safeAreaBottom + 'rpx');
            return;
          }
        }
        
        // 方法3：根据设备型号判断（兜底方案）
        const model = this.systemInfo.model || '';
        const platform = this.systemInfo.platform || '';
        
        // iPhone X 及以后的机型通常有安全区域
        if (platform === 'ios' && (model.includes('iPhone X') || 
            model.includes('iPhone 11') || 
            model.includes('iPhone 12') || 
            model.includes('iPhone 13') || 
            model.includes('iPhone 14') || 
            model.includes('iPhone 15') ||
            model.includes('iPhone 16'))) {
          // 默认安全区域高度约为 34px，转换为 rpx
          const pixelRatio = 750 / (this.systemInfo.windowWidth || 375);
          this.safeAreaBottom = 34 * pixelRatio;
          console.log('CustomTabBar - 根据设备型号设置默认安全区域:', this.safeAreaBottom + 'rpx');
          return;
        }
        
        // 其他机型默认为 0
        this.safeAreaBottom = 0;
        console.log('CustomTabBar - 未检测到安全区域，设置为 0');
      } catch (e) {
        console.warn('获取安全区域失败:', e);
        this.safeAreaBottom = 0;
      }
    },

    // 预加载 tabbar 页面
    preloadTabbarPages() {
      try {
        (this.tabbarList || []).forEach(item => {
          if (item && item.pagePath) {
            uni.preloadPage({ url: item.pagePath });
          }
        });
      } catch (e) {
        console.warn('预加载 tabbar 页面失败:', e);
      }
    },

    // 监听路由变化
    onRouteChange() {
      // 定期检查当前页面，更新 tabbar 状态
      this.checkPageTimer = setInterval(() => {
        this.updateSelectedTab();
      }, 300);
    },

    loadTabbarData() {
      try {
        // 获取用户角色，如果没有则默认为用户端
        const role = this.userStore?.role || ROLE_TYPE.USER;
        console.log('CustomTabBar - 当前角色:', role);
        
        // 根据角色显示不同的 tabbar
        if (role === ROLE_TYPE.MERCHANT || role === 'merchant') {
          this.tabbarList = merchantTabBar || [];
          this.showTabBar = this.show && true;
        } else {
          // 默认使用用户端 tabbar
          this.tabbarList = userTabBar || [];
          this.showTabBar = this.show && true;
        }
        
        console.log('CustomTabBar - tabbarList:', this.tabbarList);
        console.log('CustomTabBar - showTabBar:', this.showTabBar);
        
        // 确保 tabbarList 不为空
        if (!this.tabbarList || this.tabbarList.length === 0) {
          console.warn('CustomTabBar - tabbarList 为空，使用默认用户端配置');
          this.tabbarList = userTabBar || [];
        }
        
        // 更新选中状态
        this.updateSelectedTab();
      } catch (error) {
        console.error('加载 tabbar 数据失败:', error);
        // 出错时也设置默认值，避免不显示
        this.tabbarList = userTabBar || [];
        this.showTabBar = this.show && true;
      }
    },

    // 更新选中的 tab
    updateSelectedTab() {
      const currentPages = getCurrentPages();
      if (!currentPages || currentPages.length === 0) return;

      const currentPage = currentPages[currentPages.length - 1];
      const currentPath = `/${currentPage.route}`;

      // 查找当前页面在 tabbar 中的索引
      const index = this.tabbarList.findIndex(item => item.pagePath === currentPath);
      if (index !== -1 && this.selected !== index) {
        this.selected = index;
        if (this.userStore) {
          this.userStore.setTabIndex(index);
        }
      }
    },

    // 获取 tab 图标
    getTabIcon(index) {
      return iconMap[index] || 'home';
    },

    // 切换 tab
    switchTab(item, index) {
      // 防止重复点击同一 tab
      if (this.selected === index) {
        return;
      }

      // 获取当前页面路径
      const currentPages = getCurrentPages();
      if (!currentPages || currentPages.length === 0) return;

      const currentPage = currentPages[currentPages.length - 1];
      const currentPath = `/${currentPage.route}`;

      // 如果点击的是当前页面，不执行跳转
      if (currentPath === item.pagePath) {
        return;
      }

      // 更新选中状态
      this.selected = index;
      if (this.userStore) {
        this.userStore.setTabIndex(index);
      }

      // 自定义 tabbar 页面，使用 redirectTo 进行页面切换（更平滑）
      uni.redirectTo({
        url: item.pagePath,
        success: () => {
          console.log('redirectTo 成功:', item.pagePath);
        },
        fail: (err) => {
          console.warn('redirectTo 失败，尝试使用 reLaunch:', err);
          // 如果 redirectTo 失败，使用 reLaunch
          uni.reLaunch({ url: item.pagePath });
        }
      });
    },

    // 设置选中页（供外部调用）
    setSelected(index) {
      if (index >= 0 && index < this.tabbarList.length) {
        this.selected = index;
        if (this.userStore) {
          this.userStore.setTabIndex(index);
        }
      }
    },

    // 显示红点
    showRedDot(index) {
      this.$set(this.redDots, index, true);
    },

    // 隐藏红点
    hideRedDot(index) {
      this.$set(this.redDots, index, false);
    },

    // 设置角标
    setBadge(index, text) {
      this.$set(this.badges, index, text);
    },

    // 移除角标
    removeBadge(index) {
      this.$set(this.badges, index, null);
      this.$delete(this.badges, index);
    }
  }
};
</script>

<style scoped lang="scss">
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40rpx);
  -webkit-backdrop-filter: blur(40rpx);
  border-top: 1px solid rgba(238, 238, 238, 0.5);
  z-index: 999;
  transition: opacity 0.2s ease-in-out;
  box-sizing: border-box;
  /* 适配安全区域（兼容多种机型） */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  /* 按钮内容距离顶部 8rpx，距离底部 20rpx，与 GlobalTabBar 保持一致 */
  padding-top: 8rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

.tab-bar-icon {
  // 大小通过动态样式控制
  transition: all 0.3s ease;
}

.tab-bar-text {
  // 字体大小和间距通过动态样式控制
  color: #7A7E83;
  // margin-top 通过动态样式控制
  transition: all 0.3s ease;
  
  &.selected {
    color: #F37B1D;
  }
}

.tab-bar-badge {
  position: absolute;
  top: 0;
  right: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  padding: 0 8rpx;
  background-color: #FF3B30;
  color: #FFFFFF;
  font-size: 20rpx;
  border-radius: 16rpx;
  text-align: center;
  box-sizing: border-box;
  transform: scale(0.9);
}

.tab-bar-red-dot {
  position: absolute;
  top: 4rpx;
  right: 20rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #FF3B30;
  border-radius: 50%;
  border: 2rpx solid #FFFFFF;
}

.tab-bar-icon-font {
  transition: all 0.3s ease;
}
</style>

